<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>童趣玩具店</title>
    <!-- 引入ElementUI的样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        /*
            设置body样式

        */
        body{
            margin: 0px;/*设置上下左右空白距离为0*/
        }
        /*
            设置index-container  div样式
        */
        .index-container{
            margin: 0 auto;/*设置div居中*/
            width: 85%;/*设置宽度,使用百分比设置*/
            min-width: 1024px;/*设置最小宽度*/
        }



        /*
            ElementUI提供的样式
            设置el-header，el-footer两个标签的样式

        */
        .el-header, .el-footer {
            background-color: #606266;
            color: #333;
            line-height: 60px;
        }

        .el-header{
            background-color: lightblue;
            display: flex;
        }

        .el-footer{
            text-align: center;
            font-size: 20px;
            font-weight: bold;
            font-family: 宋体;
            letter-spacing: 3px;
            color: white;

        }

        .el-header .logo{
            border: 0px solid red;
            width: 40%;
            height: 100%;
            padding-left: 50px;
        }

        .logo span{
            margin-top:-30px;
            position: relative;
            top:-17px;
            display: inline-block;
            border: 0px solid red;
            height: 100%;
            line-height: 60px;
            font-size: 30px;
            font-weight: bold;
        }

        .el-header .user_info{
            border: 0px solid blue;
            width: 40%;
            height: 100%;
            text-align: right;
            padding-right: 30px;
        }
        .el-header .title{
            border: 0px solid blue;
            width: 20%;
            height: 100%;
            text-align: right;
            padding-right: 30px;
        }

        /**
        角标样式
        */
        .item {
            margin-top:0px;
            margin-right: 40px;
        }
        /**
       角标样式
       */
        .el-badge__content.is-fixed{
            top:15px;
            right: 13px;
        }


        .el-dropdown {
            vertical-align: top;
        }
        .el-dropdown + .el-dropdown {
            margin-left: 15px;
        }
        .el-icon-arrow-down {
            font-size: 12px;
        }

        .el-dropdown-link:hover{
            background-color: aliceblue;
        }

        /**
          ElementUI提供的样式
          设置el-main样式
         */
        .el-main {
            /*background-color: #E9EEF3;*/
            color: #333;
        }



        .el-card{
            margin:10px;
            cursor: pointer;
        }



        .image {
            width: 300px;
            height: 200px;
        }


        a:link{
            text-decoration: none;
            color: dodgerblue;
            font-weight: bold;
        }
        a:visited{
            text-decoration: none;
            color: dodgerblue;
            font-weight: bold;
        }
        a:hover{
            color: red;
            font-weight: bold;
        }







    </style>

</head>
<body>
<div id="index-container" class="index-container">

    <el-container>
        <el-header>
            <div class="logo">
                <a href="/toyshopping">
                    <img src="images/logo.png" style="height:60px ">
                </a>
                <span>童趣玩具店</span>
            </div>
            <div class="title">
                <a href="Talk.html">交流</a>
            </div>
            <div class="user_info" >
                <!--
                    v-if:vue的if指令
                    当v-if为true时显示当前标签，为false不显示当前标签
                -->
                <div class="user_operate" v-if="curUser==null">
                    <a href="register.html">用户注册</a>
                    <a href="login.html">用户登录</a>
                </div>

                <div class="user_info_div" style="display: flex;justify-content:flex-end;text-align: right" v-if="curUser!=null">

                    <el-badge :value="carCount" class="item">
                        <el-button type="success" plain icon="el-icon-shopping-cart-full" @click="location.href='car/showCar.html'">购物车</el-button>
                    </el-badge>

                    <div style="">
                        <el-dropdown  @command="handleCommand">
                              <span class="el-dropdown-link" style="display:inline-block;width:80px;text-align:center;cursor: pointer;">
                                {{curUser.user_name}}<i class="el-icon-arrow-down el-icon--right"></i>
                              </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item command="1">查看订单</el-dropdown-item>
                                <el-dropdown-item command="2">修改密码</el-dropdown-item>

                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                    <div style="margin-left: 5px">
                        <el-button type="danger" plain @click="exit">退出</el-button>
                    </div>

                </div>

            </div>
        </el-header>
        <!--商品信息展示区-->
        <el-main>

            <el-row>
                <el-col :span="6" v-for="toy in toyList"  :offset="0">

                    <!--展示商品信息-->
                    <el-card :body-style="{ padding: '0px' }" shadow="hover">
                        <img :src="'images/toys/'+toy.toy_image" class="image">
                        <div style="padding-left: 10px;height: 80px;font-size: 14px">

                        <span style="display: block;color: dodgerblue;line-height: 20px">

                            <a :href="'showToyDesc.html?toy_id='+toy.toy_id" :title="toy.toy_name">
                                {{subToyName(toy.toy_name)}}
                            </a>
                        </span>

                            <span style="display: block;line-height: 20px">
                            <span>单价:</span><span style="color: red">¥{{toy.toy_price}}</span>

                        </span>
                            <div style="text-align:right;padding-right: 10px">
                                <el-button type="warning" plain size="mini" icon="el-icon-shopping-cart-full" @click="addCar(toy.toy_id)">加入购物车</el-button>
                                <el-button type="success" plain size="mini" icon="el-icon-present">购买</el-button>
                            </div>

                        </div>
                    </el-card>

                </el-col>
            </el-row>





        </el-main>
        <el-footer>
            童趣玩具店所有&copy;2022
        </el-footer>
    </el-container>

</div>

<script src="js/vue.min.js"></script>
<script src="js/axios.min.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="js/sweetalert2.js"></script>
<script>
    /**
     * 创建Vue对象，并对vue进行配置
     * 在vue的构造器中配置
     */
    new Vue({
        //用于配置vue要渲染的元素,在el指定的元素中vue可以起作用,脱离指定元素，vue无效,vue的渲染元素可以为任意元素，一般是div
        el:'#index-container',
        data(){//vue的数据区，等同于java类中的属性
            return{
                toyList:[],//存储所有图书信息的数组
                curUser:null,//当前登录者对象
                carCount:0,//购物车中商品的数量
            }
        },
        methods:{//vue的方法区,在方法区中定义方法，这些方法类似与java中的方法
            /**
             * 获得当前登录者信息
             */
            getCurUser(){
                //从sessionStorage中获得curUser的值，值为一个字符串
                let curUserStr = window.sessionStorage.getItem("curUser");
                if(curUserStr){
                    //将JSON格式的字符串解析为一个JSON对象
                    this.curUser = JSON.parse(curUserStr);
                }

            },
            /*
                用户下拉菜单函数
            * */

            handleCommand(command){
                if(command==1){//查看订单
                    location.href="orders/showOrderByUser.html";
                }else if(command==2){//修改密码
                    location.href="Modifylogin.html"
                }
            },
            /**
             * 退出登录
             */
            exit(){
                //使用ajax向服务端发送退出请求
                axios.delete('user/exit')
                    .then(response=>{
                        let result = response.data;
                        if(result.success){
                            //将浏览器的sessionStorage中存储的用户登录信息移除
                            window.sessionStorage.removeItem("curUser");//根据key移除对应的属性
                            //使用ElementUI的弹框组件实现
                            this.$message({
                                message: result.message,
                                type: 'success',
                                duration:500,//设置延迟关闭时间(毫秒)
                                onClose:()=>{//当弹框关闭后要执行的函数
                                    this.curUser = null;//重置curUser对象为null
                                }
                            });
                        }
                    })
                    .catch(err=>{
                        alert(err);
                    });
            },



            /**
             * 获得图书列表，将图书列表赋值给bookList数组
             */
            getToys(){
                axios.get('toys/getToys?toy_is_display=0')
                    .then(response=>{
                        this.toyList = response.data;//获得服务端响应的数据
                    })
                    .catch(err=>{alert(err);});
            },
            /**
             * 截取商品名
             * */
            subToyName(toyName){
                if(toyName.length>20){
                    return toyName.substring(0,21);
                }
                return toyName;
            },
            /**
             * 添加购物车
             *  1.检测用户是否登录,未登录不允许添加购物车
             */
            addCar(toy_id){
                if(this.curUser==null){//用户未登录
                    //使用sweetalert2弹框组件，弹框
                    Swal.fire({
                        icon: 'error',//图标
                        title: "请登录后购买",//消息
                        showConfirmButton: false,//不显示确认按钮
                        timer: 1000,//延迟时间
                        willClose:()=>{//当弹框关闭时执行的函数
                            location.href="login.html";

                        }
                    });
                    return;
                }
                //创建car对象
                let car = {
                    "toy_id":toy_id,
                    "user_id":this.curUser.user_id,
                    "car_count":1
                };
                //用户已的登录,向服务端发送请求，将商品添加到购物车
                axios.post('car/addCar',car)
                    .then(response=>{
                        let result = response.data;
                        if(result.success){//添加成功
                            //使用sweetalert2弹框组件，弹框
                            Swal.fire({
                                icon: 'success',//图标
                                title: result.message,//消息
                                showConfirmButton: false,//不显示确认按钮
                                timer: 1000,
                                willClose:()=>{
                                    this.getCarCount();
                                }
                            });
                        }else{
                            if(result.statusCode==401){//表示未认证(未登录)
                                //从浏览器的session作用域中移除curUser
                                window.sessionStorage.removeItem("curUser");
                                this.curUser=null;

                                //使用sweetalert2弹框组件，弹框
                                Swal.fire({
                                    icon: 'error',//图标
                                    title: "请登录后购买",//消息
                                    showConfirmButton: false,//不显示确认按钮
                                    timer: 1000
                                });

                            }

                        }
                    })
                    .catch(err=>{
                        alert(err);
                    });







            },
            /**
             * 获得购物车中商品数量
             */
            getCarCount(){
                if(this.curUser==null){
                    return;
                }
                //用户已登录
                axios.get('car/getCount?user_id='+this.curUser.user_id)
                    .then(response=>{
                        this.carCount = response.data;
                    })
                    .catch(err=>{
                        alert(err);
                    });
            }
        },
        created(){/*在页面加载后自动执行*/

        },
        mounted(){/*DOM结构在内存中构建前执行*/
            this.getCurUser();//获得当前登录者信息
            this.getToys();//调用获得图书列表的方法
            this.getCarCount();//获得当前用户购物车中商品的数量

        }
    });
</script>
</body>
</html>